<template>
	<view>
		<u-overlay :show="value" class="LoadingOverlay" :style="{backgroundColor: maskBackgroundColor}">
			<view class="wrapper">
				<!-- <view class="block">
					<view class="LoadingBox">
						<view class="TheLoading">
							<view class="spinner-6"></view>
						</view>
					</view>

					<view style="font-size: 24rpx;">加载中</view>

				</view> -->

				<view class="block_1 x-f">
					<view class="block_1_left x-c">

						<view v-if="loaderActive == 'loading'" class="loader"></view>
						<view v-else-if="loaderActive == 'success'" class="x-c">
							<slot name="icon">
								<image src="/uni_modules/mc-ui/static/image/success.png" style="width:16px;height:16px;"
									mode="scaleToFill">
								</image>
							</slot>
						</view>
						<view class="x-f" style="margin-left: 6px;min-width: 60px;">
							<text>
								{{text}}
							</text>
						</view>
					</view>

					<view v-if="showClose" class="block_1_right x-c" @tap="close">
						<uni-icons type="closeempty" size="24" color="#636466"></uni-icons>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	export default {
		name: "m-loading",
		data() {
			return {};
		},
		props: {
			maskBackgroundColor: {
				type: String,
				default: 'rgba(0,0,0,0.5)'
			},
			value: {
				type: [Boolean, String],
				default: false
			},
			text: {
				type: String,
				default: '正在处理...'
			},
			showClose: {
				type: Boolean,
				default: true,
			},
			loaderActive: {
				type: String,
				default: 'loading'
			}
		},
		methods: {
			close() {
				this.$emit('close')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.LoadingOverlay {
		z-index: 999999;

		.wrapper {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;

			.block {
				width: 210px !important;
				/* height: 100px !important; */
				border-radius: 12px !important;
				// background: rgba(77, 77, 77, .8) !important;
				background: #4d4d4d !important;
				text-align: center;
				color: #fff;
				padding: 0 0 15px;

				.LoadingBox {
					position: relative;
					width: 210px !important;
					height: 100px !important;

					.TheLoading {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);

						.spinner-6 {
							/* 加载大小 */
							width: 60px;
							aspect-ratio: 1;
							display: grid;
							-webkit-mask: conic-gradient(from 15deg, #0000, #000);
							animation: s6 1s infinite steps(12);
						}
					}
				}
			}


			.block_1 {
				width: 60vw;
				max-width: 400px;
				height: 50px;
				border-radius: 6px;
				overflow: hidden;
				box-shadow: 1px 1px 13px -7px #999;
				background-color: #ebecee;

				&_left {
					height: 100%;
					flex: 1;
					font-weight: 600;
				}

				&_right {
					width: 60px;
					height: 100%;
					border-left: 1px solid #a8a8aa;
				}
			}


		}

	}


	.spinner-6,
	.spinner-6:before,
	.spinner-6:after {
		background:
			radial-gradient(closest-side at 50% 12.5%,
				#f03355 96%, #0000) 50% 0/20% 80% repeat-y,
			radial-gradient(closest-side at 12.5% 50%,
				#f03355 96%, #0000) 0 50%/80% 20% repeat-x;
	}

	.spinner-6:before,
	.spinner-6:after {
		content: "";
		grid-area: 1/1;
		transform: rotate(30deg);
	}

	.spinner-6:after {
		transform: rotate(60deg);
	}

	@keyframes s6 {
		100% {
			transform: rotate(1turn)
		}
	}


	.loader {
		zoom: 0.5;
		animation: rotate 1s infinite;
		height: 50px;
		width: 50px;
	}

	.loader:before,
	.loader:after {
		border-radius: 50%;
		content: '';
		display: block;
		height: 20px;
		width: 20px;
	}

	.loader:before {
		animation: ball1 1s infinite;
		background-color: #cb2025;
		box-shadow: 30px 0 0 #f8b334;
		margin-bottom: 10px;
	}

	.loader:after {
		animation: ball2 1s infinite;
		background-color: #00a096;
		box-shadow: 30px 0 0 #97bf0d;
	}

	@keyframes rotate {
		0% {
			-webkit-transform: rotate(0deg) scale(0.8);
			-moz-transform: rotate(0deg) scale(0.8);
		}

		50% {
			-webkit-transform: rotate(360deg) scale(1.2);
			-moz-transform: rotate(360deg) scale(1.2);
		}

		100% {
			-webkit-transform: rotate(720deg) scale(0.8);
			-moz-transform: rotate(720deg) scale(0.8);
		}
	}

	@keyframes ball1 {
		0% {
			box-shadow: 30px 0 0 #f8b334;
		}

		50% {
			box-shadow: 0 0 0 #f8b334;
			margin-bottom: 0;
			-webkit-transform: translate(15px, 15px);
			-moz-transform: translate(15px, 15px);
		}

		100% {
			box-shadow: 30px 0 0 #f8b334;
			margin-bottom: 10px;
		}
	}

	@keyframes ball2 {
		0% {
			box-shadow: 30px 0 0 #97bf0d;
		}

		50% {
			box-shadow: 0 0 0 #97bf0d;
			margin-top: -20px;
			-webkit-transform: translate(15px, 15px);
			-moz-transform: translate(15px, 15px);
		}

		100% {
			box-shadow: 30px 0 0 #97bf0d;
			margin-top: 0;
		}
	}
</style>